<template>
  <div class="assets">
    <div>
      <el-button type="primary" size="mini" @click="save">{{ $t('btn.save') }}</el-button>
    </div>
    <div class="title">{{ $t('market.info') }}</div>
    <el-form :model="proValue" label-width="100px" size="mini" :rules="rules">
      <el-form-item :label="$t('market.billType')" prop="fbilltypeid">
        <el-select v-model="proValue.fbilltypeid">
          <el-option
            v-for="item in billtype"
            :key="item.fid"
            :label="item.fname"
            :value="item.fid"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('market.cardNumber')" prop="fnumber">
        <template slot="label">
          <span style="color: #F56C6C;">*</span>
          {{ $t('market.cardNumber') }}
        </template>
        <el-input v-model="proValue.fnumber">
          <i
            slot="suffix"
            class="el-input__icon el-icon-search"
            @click="assetsVis=true"
          />
        </el-input>
      </el-form-item>
      <el-form-item :label="$t('market.assetsname')" prop="fassetsname">
        <el-input v-model="proValue.fassetsname" disabled />
      </el-form-item>
      <el-form-item :label="$t('market.businessDate')" prop="fdate">
        <el-date-picker
          v-model.trim="proValue.fdate"
          type="date"
          value-format="yyyy-MM-dd"
          style="width: 163px"
        />
      </el-form-item>
      <el-form-item :label="$t('market.laststatus')">
        <el-input v-model="proValue.flaststatusname" disabled />
      </el-form-item>
      <el-form-item :label="$t('market.nowstatus')">
        <el-select v-model="proValue.fnowstatusid">
          <el-option
            v-for="item in billtype3"
            :key="item.fid"
            :label="item.fname"
            :value="item.fid"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('market.changeReason')">
        <el-input v-model="proValue.freason" />
      </el-form-item>
    </el-form>
    <el-tabs v-model="activeName">
      <el-tab-pane :label="$t('market.entityInfo')" name="first">
        <jc-table
          serial
          :table-header="tableHeader"
          :table-data="tableDate"
          table-height="500px"
        >
          <!--资产位置(变更后)-->
          <template v-slot:btnState="col">
            <el-select v-model="col.scope.row.fnowareaid" size="mini">
              <el-option
                v-for="item in billtype2"
                :key="item.fid"
                :label="item.fname"
                :value="item.fid"
              />
            </el-select>
          </template>
          <!--规格型号(变更后)-->
          <template v-slot:btnStates="col">
            <el-input v-model="col.scope.row.fnowmodel" size="mini" />
          </template>
          <!--部门(变更后)-->
          <template v-slot:text2Slot="col">
            <el-input v-model="col.scope.row.fnowusedep" size="mini">
              <i
                slot="suffix"
                class="el-input__icon el-icon-search"
                @click="handelWorkshop(col.scope.$index)"
              />
            </el-input>
          </template>
          <!--费用项目(变更后)-->
          <template v-slot:text3Slot="col">
            <el-select v-model="col.scope.row.fnowexpenseitemid" size="mini">
              <el-option
                v-for="item in billtype4"
                :key="item.fid"
                :label="item.fname"
                :value="item.fid"
              />
            </el-select>
          </template>
        </jc-table>
      </el-tab-pane>
    </el-tabs>
    <!--  卡片编码  -->
    <assets v-if="assetsVis" @assets="assetsData" />
    <!--  部门-->
    <responDepart v-if="departVisiblit" @depart="selUnit" />
  </div>
</template>

<script>
import {
  createAssetsChangeBill, queryAssetsDetails
} from '@/api/financial/assets'
import { queryViewItem } from '@/api/marketManage/marketOrder'

export default {
  components: {
    responDepart: () => import('@/views/quality/qualityDetail/component/responDepart'),
    assets: () => import('@/views/financial/assets/dispose/component/assets')
  },
  data() {
    return {
      activeName: 'first',
      assetsVis: false,
      departVisiblit: false,
      proValue: {
        fbilltypeid: 1485,
        freason: '',
        flaststatusid: '',
        fnowstatusid: 1456,
        fdate: new Date().toLocaleDateString().replaceAll('/', '-')
      },
      billtype: [],
      billtype2: [],
      billtype3: [], // 资产状态
      billtype4: [], // 费用项目
      tableDate: [],
      tableHeader: [
        { label: this.$t('market.assetsnum'), prop: 'fassetsbillno', width: '100' },
        { label: this.$t('market.lastareaname'), prop: 'flastareaname', width: '150' },
        { label: this.$t('market.nowareaname'), type: 'state', prop: 'fnowareaid', width: '150' },
        // { label: this.$t('market.lastmodel'), prop: 'flastmodel', width: '150' },
        // { label: this.$t('market.nowmodel'), type: 'states', prop: 'fnowmodel', width: '150' },
        { label: this.$t('market.usdepLast'), prop: 'flastusedep', width: '150' },
        { label: this.$t('market.usdepnow'), type: 'text2', prop: 'fnowusedep', width: '150' },
        { label: this.$t('market.expenseLast'), prop: 'flastexpenseitem', width: '150' },
        { label: this.$t('market.expensenow'), type: 'text3', prop: 'fnowexpenseitem', width: '150' }
      ],
      indexSelf: 0,
      rules: {
        fdate: [{ required: true, trigger: 'blur' }],
        fbilltypeid: [{ required: true, trigger: 'blur' }]
      }
    }
  },
  created() {
    this.queryTBasBilltype()
    this.queryTBasBilltype2()
    this.queryTBasBilltype3()
    this.queryTBasBilltype4()
  },
  methods: {
    // 费用项目
    async queryTBasBilltype4() {
      const { data: RES } = await queryViewItem({ viewName: 'SX_V_EXPENSEITEM_CARD' })
      this.billtype4 = RES.list
    },
    // 保存
    save() {
      const DATA = {
        ...this.proValue,
        details: this.tableDate
      }
      createAssetsChangeBill(DATA).then(res => {
        if (res.code === 0) {
          this.$message({ showClose: true, message: res.message, type: 'success' })
          // 关闭当前页面
          this.$store.dispatch('tagsView/guanbi', this.$route)
          this.$router.push({ path: `/changeDetail/${res.data.fid}` })
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 卡片编码
    assetsData(ev) {
      if (ev.fassetsbillno) {
        const item = this.proValue
        item.fnumber = ev.fbillno
        item.fassetsname = ev.fassetsname
        item.fassetsid = ev.fid
        this.handleGetUntreated(ev)
      }
      this.assetsVis = false
    },
    handelWorkshop(index) {
      this.indexSelf = index
      this.departVisiblit = true
    },
    // 部门
    selUnit(ev) {
      if (ev?.fid) {
        const item = this.tableDate[this.indexSelf]
        item.fnowusedep = ev.fname
        item.fnowusedepid = ev.fid
      }
      this.departVisiblit = false
    },
    // 卡片详情
    handleGetUntreated(ev) {
      const fid = ev.fid
      queryAssetsDetails({ fid }).then(res => {
        if (res.code === 0) {
          // 表头资产变更前
          this.proValue.flaststatusid = res.data.fstatusid
          this.proValue.flaststatusname = res.data.fstatusname
          // 实物信息
          this.tableDate = []
          res.data.details.map(res => {
            this.tableDate.push({
              fassetsbillno: res.fassetsbillno,
              fassetsentryid: res.fentryid,
              flastmodel: res.fmodel,
              fnowmodel: '',
              fnowusedep: '',
              fnowusedepid: '',
              fnowareaid: res.fareaid,
              flastareaid: res.fareaid,
              flastareaname: res.fareaname,
              flastusedep: res.fusedepname,
              flastusedepid: res.fusedepid,
              flastexpenseitem: res.fexpenseitemname,
              flastexpenseitemid: res.fexpenseitemid
            })
          })
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 单据类型
    async queryTBasBilltype() {
      const { data: RES } = await queryViewItem({ viewName: 'SX_ASSETS_CHANGE' })
      this.billtype = RES.list
    },
    // 资产位置
    async queryTBasBilltype2() {
      const { data: RES } = await queryViewItem({ viewName: 'SX_ASSETS_AREA' })
      this.billtype2 = RES.list
    },
    // 资产状态
    async queryTBasBilltype3() {
      const { data: RES } = await queryViewItem({ viewName: 'SX_ASSETS_STATUS' })
      this.billtype3 = RES.list
    }
  }
}
</script>

<style scoped lang="scss">
.assets {
  @include listBom;
  .title {
    font-size: 14px;
    margin-top: 5px;
    color: #1e9fff;
  }
  .el-input::v-deep .el-input__inner {
    height: 30px;
    line-height: 30px;
  }
  .el-form {
    display: flex;
    flex-wrap: wrap;
    .el-form-item {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      height: 30px !important;
      width: 275px;
      margin-bottom: 5px;
    }
  }
}
</style>

